<!DOCTYPE html>

<html class="no-js">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title></title>
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://cdn.staticfile.org/axios/0.19.0-beta.1/axios.js"></script>
  <script src="../../cdn/vue/vue.global.min.js"></script>
  <link rel="stylesheet" href="../../cdn/element-plus/index.css" />
  <script src="../../cdn/element-plus/index.full.min.js"></script>

  <link rel="stylesheet" href="../../../lib/index.css" />
  <script src="../../../lib/avue.js"></script>
</head>

<body>
  <div id="app">
    <avue-form v-model="form" :option="option">
      <template #cascader3-type="{node,data}">
        <span></span>
        <span v-if="!node.isLeaf">{{data.label}}({{data.children.length}}) </span>
      </template>
    </avue-form>
  </div>
</body>
<script>
  const dic = [{
    value: 'zhinan',
    label: '指南',
    children: [{
      value: 'shejiyuanze',
      label: '设计原则',
      children: [{
        value: 'yizhi',
        label: '一致'
      }, {
        value: 'fankui',
        label: '反馈'
      }]
    }]
  }]
  let id = 0;
  let baseUrl = 'https://cli.avuejs.com/api/area'
  var app = Vue.createApp({
    data() {
      return {
        form: {
          cascader4: ["110000", "110100", "110101"]
        },
        option: {
          column: [{
            label: '多选',
            prop: 'cascader',
            type: "cascader",
            dicData: dic,
            multiple: true
          }, {
            label: '任意一级',
            prop: 'cascader1',
            type: "cascader",
            dicData: dic,
            checkStrictly: true
          }, {
            label: '搜索',
            prop: 'cascader2',
            type: "cascader",
            dicData: dic,
            filterable: true
          }, {
            label: '自定义',
            prop: 'cascader3',
            type: "cascader",
            dicData: dic
          }, {
            label: '懒加载',
            prop: 'cascader4',
            type: "cascader",
            props: {
              label: 'name',
              value: 'code'
            },
            rules: [
              {
                type: 'array',
                required: true,
                message: '请输入数字',
                trigger: 'change'
              }
            ],
            lazy: true,
            lazyLoad(node, resolve) {
              let stop_level = 2;
              let level = node.level;
              let data = node.data || {}
              let code = data.code;
              let list = [];
              let callback = () => {
                resolve((list || []).map(ele => {
                  return Object.assign(ele, {
                    leaf: level >= stop_level
                  })
                }));
              }
              if (level == 0) {
                axios.get(`${baseUrl}/getProvince`).then(res => {
                  list = res.data;
                  callback()
                })
              }
              if (level == 1) {
                axios.get(`${baseUrl}/getCity/${code}`).then(res => {
                  list = res.data;
                  callback()
                })
              } else if (level == 2) {
                axios.get(`${baseUrl}/getArea/${code}`).then(res => {
                  list = res.data;
                  callback()
                })
              }
            }
          }]
        }
      }
    }
  })
  app.use(ElementPlus)
  app.use(AVUE)
  app.mount('#app')
</script>

</html>